<template>
	<div class="rescue_right_main" id="rescue_right_main">
		<div v-for="(item, index) in dataList" :key="index">
			<div class="rescue_right_menu">
				<div class="rescue_time">
					<span>{{ item.alarmTime }}</span>
				</div>
				<div class="rescue_location">
					<div class="rescue_location_value">
						{{ item.installationLocation }}
					</div>
				</div>
				<div class="register_code">
					<span>电梯编码：</span><span>{{ item.registrationCode }}</span>
				</div>
				<div class="maintenance_company">
					<span>救援编码：</span><span>{{ item.rescueIdentificationCode }}</span>
				</div>
				<div class="user_company">
					<span>维保单位：</span><span>{{ item.maintenanceCorporation }}</span>
				</div>

				<div class="alarm_type">
					<span>状态：</span><span>{{ item.procStage }}</span>
				</div>
			</div>
			<div class="split_point"><span></span><span></span></div>
		</div>
		<div v-if="dataList.length == 0" style="
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        width: 400px;
      ">
			<el-empty description="没有数据" />
		</div>
	</div>
</template>

<script setup>
	import {
		GetFaultList
	} from "@/api/index";
	import {
		ref,
		onMounted,
		onUnmounted
	} from "vue";
	const username = ref('')
	onMounted(async () => {
		username.value = localStorage.getItem('username')
		await init();
	});
	const dataList = ref([]);
	const data = ref({
		procStage: "未开始",
		page: 1,
		size: 4,
	});


	const init = async () => {
		try {
			const res = await GetFaultList(data.value, username.value);
			// console.log(res);
			dataList.value = res.data.content;
		} catch (error) {}
	};
</script>

<style scoped>
	.rescue_right_main {
		/* width: 400px; */
		/* margin-top: 99px; */
		position: absolute;
		/* right: 32px; */
		z-index: 999999;
	}

	.rescue_right_main>div:not(:first-child) {
		margin-top: 12px;
	}

	.rescue_right_menu {
		/* width: 398px; */
		height: 207px;
		background: rgba(7, 18, 49, 0.8);
		border: 1px solid rgba(97, 153, 255, 0.2);
		position: relative;
	}

	.rescue_time {
		margin: 24px 0 0 22px;
		width: 158px;
		height: 11px;
		font-size: 14px;
		font-family: Furore;
		font-weight: 400;
		color: rgba(16, 241, 164, 1);
		line-height: 11px;
	}

	.rescue_time>span:last-child {
		margin-left: 10px;
	}

	.rescue_location {
		width: 350px;
		/* width: 280px; */
		height: 22px;
		line-height: 22px;
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
		margin-top: 20px;
	}

	.rescue_location>img {
		position: absolute;
		left: 22px;
	}

	.rescue_location_value {
		width: 340px;
		margin-left: 52px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.register_code {
		color: #28f6fe;
		margin-left: 52px;
		margin-top: 15px;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
	}

	.user_company {
		color: #28f6fe;
		margin-left: 52px;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
		margin-top: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.maintenance_company {
		color: #28f6fe;
		margin-left: 52px;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
		margin-top: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.alarm_type {
		color: #28f6fe;
		margin-left: 52px;
		font-size: 14px;
		line-height: 14px;
		height: 14px;
		margin-top: 12px;
	}

	/* .split_point {

  height: 2px;
}
.split_point > span {
  width: 4px;
  height: 2px;
  background: white;
  display: block;
  float: left;
}
.split_point > span:nth-of-type(2) {
  float: right;
} */
</style>